<template>
    <el-popover placement="bottom" trigger="click" v-model="popShow" width="350" popper-class='col_pop'
       >
        <span class="title">设置排序条件</span>
        <div class="sortContainer">
            <div class="sortItem" v-for="item in sortList" :key="item.id">
                <div class="dragger">
                    <i class="el-icon-menu menu"></i>
                    <span class="item-title">{{item.title}}</span>
                </div>
                <el-radio-group v-model="item.checkRadio" size="mini" @input="handleChange">
                    <el-radio-button label="ASC">
                        A<i class="el-icon-right" style="margin:0 5px"></i>Z
                    </el-radio-button>
                    <el-radio-button label="DESC">
                        Z<i class="el-icon-right" style="margin:0 5px"></i>A
                    </el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <el-button type="text" size="mini" icon="el-icon-sort" slot="reference" style="margin:0 10px"
            :disabled="tableTotal <= 0">排序</el-button>
    </el-popover>
</template>

<script>
    import {
        getSearchCache
    } from '@/api/produceController'
    import Sortable from "sortablejs"
    export default {
        data() {
            return {
                popShow: false,
                sortList:[
                    {
                        id:1,
                        title:'下单时间',
                        label:'createTime',
                        checkRadio:'DESC'
                    },
                    {
                        id:2,
                        title:'完成进度',
                        label:'finishProgress',
                        checkRadio:'DESC'
                    },
                ]
            }
        },
        props: {
            tableTotal: {
                type: Number,
                default: 0
            }
        },
        mounted() {
            this.rowDrop()
            this.getSearchCacheFn({
                cacheName: 'workOrder:orderBy',
                type: 1
            })
        },
        methods: {
            //获取排序缓存结果
            getSearchCacheFn: async function (data) {
                const res = await getSearchCache(data)
                res.data !== null && (this.sortList = JSON.parse(res.data))
                this.$emit('isCacheSort',res.data !== null,this.sortList)
            },
            handleChange() {
                this.$emit('getSortInfoList',this.sortList)
            },
            rowDrop() {
                const el = document.querySelector(".sortContainer")
                const that = this
                Sortable.create(el, {
                    animation: 150,
                    handle: ".menu",
                    onEnd({
                        newIndex,
                        oldIndex
                    }) {
                        const currRow = that.sortList.splice(oldIndex, 1)[0]
                        that.sortList.splice(newIndex, 0, currRow)
                        that.$emit('getSortInfoList',that.sortList)
                    }
                })
            },
        }
    }
</script>